import React, { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import autoHeight from '../autoHeight';
import styles from '../index.less';

@autoHeight()
class DualAxis extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { title, data, height, padding, forceFit = true } = this.props;
    const scale = {
      date: { range: [0.05, 0.95] },
      revenue: { alias: '营收额' },
      quantity: { alias: '订单量' },
    };
    return (
      <div className={styles.chart}>
        {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
        <Chart height={height} scale={scale} forceFit={forceFit} data={data} padding={padding}>
          <Legend
            custom
            allowAllCanceled
            items={[
              { value: '订单量', marker: { symbol: 'square', fill: '#3182bd', radius: 5 } },
              {
                value: '营收额',
                marker: { symbol: 'hyphen', stroke: '#fdae6b', radius: 5, lineWidth: 3 },
              },
            ]}
          />
          <Axis name="revenue" />
          <Tooltip />
          <Geom type="interval" position="date*quantity" color="#3182bd" />
          <Geom type="line" position="date*revenue" color="#fdae6b" shape="smooth" />
          <Geom type="point" position="date*revenue" color="#fdae6b" shape="circle" />
        </Chart>
      </div>
    );
  }
}

export default DualAxis;
